/*hover 2018.6.20*/
/*public*/
@charset "utf-8"; 
.C-line, .C-WH, .C-H, .B-T, .B-T1,[class*="Border"]{ position: relative; width: 100%; height: 100%; z-index: 0; }
.C-line:before, .C-WH:before, .C-H:before, .B-T:before, .B-T1:before, .L-R:before, .L-R1:before,[class*="Border"]:before,[class*="Border"]:after{ transition: 0.3s ease 0s; position: absolute; content: ''; z-index: -1; }
/*绾挎潯銆佽壊鍧�*/
.C-line:before { left: 50%; height: 3px; background: #f5811a; bottom: 0; width: 0; }
.C-WH:before { background: #f5811a; top: 50%; left: 50%; width: 0%; height: 0%; opacity: 0; }
.C-H:before { width: 100%; height: 0; background: #f5811a; left: 0; top: 50%; }
.B-T:before, .B-T1:before { width: 100%; height: 0; background: #f5811a; left: 0; }
.B-T:before { bottom: 0; }
.B-T1:before { top: 0; }
.L-R, .L-R1 { position: relative; width: 100%; height: 100%; z-index: 1; }
.L-R:before, .L-R1:before { width: 0; top: 0; height: 100%; background: #f5811a; }
.L-R:before { left: 0; }
.L-R1:before { right: 0; }
/*绾挎*/
.Border1:before, .Border1:after, .Border2:before, .Border2:after { width: 0; height: 0; box-sizing: border-box; opacity: 0; }
.Border1:before, .Border2:before { left: 0; top: 0; border-top: 1px solid #f5811a; }
.Border1:before { border-left: 1px solid #f5811a; }
.Border1:after, .Border2:after { bottom: 0; right: 0; border-bottom: 1px solid #f5811a; }
.Border1:after { border-right: 1px solid #f5811a; }
.Border2:before { border-right: 1px solid #f5811a; }
.Border2:after { border-left: 1px solid #f5811a; }
.Border2:before { transition: width 0.3s linear 0.9s, height 0.3s linear 0.6s, opacity 0s linear 1.2s; }
.Border2:after { transition: height 0.3s linear 0s, width 0.3s linear 0.3s, opacity 0s linear 0.6s; }
.Border3:before, .Border3:after { opacity: 0; box-sizing: border-box; }
.Border3:before { border-left: 1px solid #f5811a; border-right: 1px solid #f5811a; width: calc(100% + 20px); height: 100%; top: 0; left: -10px; }
.Border3:after { border-top: 1px solid #f5811a; border-bottom: 1px solid #f5811a; height: calc(100% + 20px); width: 100%; left: 0; top: -10px; }
.Border4:before, .Border4:after { width: 100%; height: 100%; top: 0; left: 0; }
.Border4:before { border-left: 1px solid #f5811a; border-right: 1px solid #f5811a; box-sizing: border-box; }
.Border4:after { border-top: 1px solid #f5811a; border-bottom: 1px solid #f5811a; box-sizing: border-box; }
/*鍦�*/
.Circular-BG1, .Circular-BG2, .Circular-BG3, .Circular-BG4, [class*="Circular-rotate"] {
border-radius: 50%;
position: relative;
z-index: 0;
}
[class*="Circular-rotate"] {
overflow: hidden;
}
[class*="Circular-rotate"]>i {
position: absolute;
width: 50%;
height: 100%;
top: 0;
z-index: -1;
overflow: hidden;
}
[class*="Circular-rotate"]>i.L {
left: 0;
}
[class*="Circular-rotate"]>i.R {
right: 0;
}
.Circular-BG1:before, .Circular-BG3:after { background: #333; transition: 0.6s ease 0s; }
.Circular-BG1:after, .Circular-BG2:after { transition: 0.4s ease 0s; background: #f5811a; transform: scale(0.2); opacity: 0; }
.Circular-BG3:before { background: #f5811a; transition: 0.3s ease 0s; }
.Circular-BG4:before { transition: 0.8s ease 0s;}
.Circular-BG1:before, .Circular-BG1:after, .Circular-BG2:after, .Circular-BG3:after, .Circular-BG3:before,.Circular-BG4:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; z-index: -1; }
.Circular-rotate1>i:before { content: ''; background: #f5811a; width: 100%; height: 100%; display: block; transform: rotate(-180deg); }
.Circular-rotate2>i:before { transition: 0.3s linear 0s; content: ''; display: block; height: 100%; border-radius: 50%; border-top: 4px solid #f5811a; padding-left: calc(100% - 4px); padding-right: calc(100% - 4px); box-sizing: border-box; border-left: 4px solid #f5811a; border-right: 4px solid transparent; border-bottom: 4px solid transparent; }
.Circular-rotate2>i.L:before { transition: 0.3s linear 0s; transform: rotate(-225deg); }
.Circular-rotate2>i.R:before { transition: 0.3s linear 0.3s; margin-left: -100%; transform: rotate(-45deg); }
.Circular-rotate1>i.L:before { transition: 0.3s linear 0s; transform-origin: right; }
.Circular-rotate1>i.R:before { transition: 0.3s linear 0.3s; transform-origin: left; }
.Circular-rotate3:before, .Circular-rotate4:before { content: ''; position: absolute; z-index: 1; width: 6px; height: 6px; background: #f5811a; }
.Circular-rotate3:before { left: 50%; top: 0; animation: rotate3 5s linear 0s infinite; transform-origin: 0 25px; transform: translate3d(-50%, -50%, 0); }
.Circular-rotate4:before { animation: rotate4-X 4s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate, rotate4-Y 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; }
/*鍔ㄧ敾*/
@keyframes beat { 0%, 100% {
transform: scale(1, 1);
}
25% {
transform: scale(0.9, 1.1);
}
50% {
transform: scale(1.1, 0.9);
}
75% {
transform: scale(0.95, 1.05);
}
}
@keyframes skew { 0%, 11.1%, 100% {
 -webkit-transform: none;
 -moz-transform: none;
 transform: none;
}
22.2% {
 -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
 -moz-transform: skewX(-12.5deg) skewY(-12.5deg);
 transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
 -webkit-transform: skewX(6.25deg) skewY(6.25deg);
 -moz-transform: skewX(6.25deg) skewY(6.25deg);
 transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
 -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
 -moz-transform: skewX(-3.125deg) skewY(-3.125deg);
 transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
 -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
 -moz-transform: skewX(1.5625deg) skewY(1.5625deg);
 transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
 -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
 -moz-transform: skewX(-.78125deg) skewY(-.78125deg);
 transform: skewX(-.78125deg) skewY(-.78125deg);
}
77.7% {
 -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
 -moz-transform: skewX(0.390625deg) skewY(0.390625deg);
 transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
 -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
 -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg);
 transform: skewX(-.1953125deg) skewY(-.1953125deg);
}
}
@keyframes rotate3 { 0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
@keyframes rotate4-X { 0% {
left: 0px;
}
 100% {
left: calc(100% - 6px);
}
}
@keyframes rotate4-Y { 0% {
top: 0px;
}
 100% {
top: calc(100% - 6px);
}
}
@media screen and (min-width: 1101px) {
.C-line:hover:before { left: 0; width: 100%; }
.C-WH:hover:before { left: 0; top: 0; width: 100%; height: 100%; opacity: 1; }
.C-H:hover:before { height: 100%; top: 0; }
.B-T:hover:before, .B-T1:hover:before { height: 100%; }
.B-T1:hover:before { top: auto; bottom: 0; }
.L-R:hover:before, .L-R1:hover:before { width: 100%; }
.L-R1:hover:before { right: auto; left: 0; }
.scale:hover img { transform: scale(1.1); }
.Border1:hover:before, .Border1:hover:after, .Border2:hover:before, .Border2:hover:after { width: 100%; height: 100%; opacity: 1; }
.Border2:hover:before { transition: width 0.3s linear 0s, height 0.3s linear 0.3s; }
.Border2:hover:after { transition: width 0.3s linear 0.6s, height 0.3s linear 0.9s, opacity 0s linear 0.6s; }
.Border3:hover:before, .Border3:hover:after { opacity: 1; }
.Border3:hover:before, .Border3:hover:after{ width: 100%; height: 100%; top: 0; left: 0; }
.Border4:hover:before { width: calc(100% + 20px); left: -10px; opacity: 0; }
.Border4:hover:after { height: calc(100% + 20px); top: -10px; opacity: 0; }
.Circular-BG1:hover:before { transform: scale(1.3); opacity: 0; }
.Circular-BG1:hover:after { transform: scale(1); opacity: 1; transition-delay: 0.1; }
.Circular-BG2:hover:after { transform: scale(1); opacity: 1; }
.Circular-BG3:hover:after { transform: scale(0); }
.Circular-BG4:hover:before { box-shadow: 0 0 0 50px #f5811a inset; }
.Circular-rotate1:hover>i:before { transform: rotate(0deg); }
.Circular-rotate2:hover>i.R:before { transform: rotate(135deg); }
.Circular-rotate2:hover>i.L:before { transform: rotate(-45deg); }
[class*="Circular-rotate"]:hover>i.R:before { transition: 0.3s linear 0s; }
[class*="Circular-rotate"]:hover>i.L:before { transition: 0.3s linear 0.3s; }
.beat1:hover img, .beat2:hover { transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); animation: beat 0.5s 1; }
.skew1:hover img, .skew2:hover { -webkit-animation: skew 1s; -moz-animation: skew 1s; animation: skew 1s; }

}